/** @jsxImportSource @emotion/react */
//import { jsx, css } from "@emotion/react";
import * as React from "react";
import {
    Navbar,
    Toolbar,
    Text,
    Button,
    IconButton,
    MenuList,
    MenuItem,
    useTheme,
    useToast,
    LayerLoading,
    Container,
    IconMoreVertical,
    IconArrowLeft,
    IconArrowRight,
    IconPackage,
    IconRefButton,
    VerticalMenu,
    DdMenuItem,
    TwoHalfRightPanel,
    IconCloud,
    IconCheckSquare, DdMenu, IconMenu
} from "customize-easy-ui-component";
import { Link as RouterLink } from "../routing/Link";
//import {Helmet} from "react-helmet";
//import { Link as RouterLink, Route, Switch, useLocation, useRoute } from "wouter";
//import { ContainLine, TransparentInput } from "../comp/base";
//import {useDeviceDetail, useRemoveEQP} from "./db";
//import { AddToTask } from "./task/AddToTask";
//import { DeviceDetail } from "./DeviceDetail";
import { ComposePipingUnit } from "./ComposePipingUnit";
//graphql不能用react-relay/hooks的。报错 Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import { PipeLineGuideQuery } from "./__generated__/PipeLineGuideQuery.graphql";
import {PipingUnitDetail} from "./PipingUnitDetail";
import {useContext} from "react";
import RoutingContext from "../routing/RoutingContext";
import {usePipingUnitMultiSelect} from "./hook/usePipingUnitMultiSelect";
import {IPipingUnitEntity} from "../comp/ChoosePipingUnits";
import useSessionStorageState from "use-session-storage-state";

const graphql = require("babel-plugin-relay/macro");    //必须这样!编译器解析graphql文本代码。


interface PipeLineGuideProps {
    id?: string;   　//来自上级<Route path={"/device/:id/"} component={} />给的:id。
    prepared: {
        eqpQuery: PreloadedQuery<PipeLineGuideQuery>;
    }
    children: React.ReactNode;
    routeData: any;
}
//右半边页面
export default function PipeLineGuide(props: PipeLineGuideProps) {
    //console.log("刚DetailedGuide经过props",props);
    const theme = useTheme();
    const toast = useToast();
   // const [, setLocation] = useLocation();
   // const [match, params] = useRoute("/device/:id/:rest*");
   // let id =(match && params.id);
   // if(id==='new')
    //const id=undefined;
    const data = usePreloadedQuery<PipeLineGuideQuery>(
        graphql`
            query PipeLineGuideQuery($id: ID! ) {
                node(id: $id) {
                    id,
                    ... on PipingUnit {
                      code name rno  pipe{id useu{id name company{id name} person{id name}} },
                        svp,pa,leng,insd,used,mdi matr start stop
                        desu{id company{id name} person{id name}} 
                        insu{id company{id name} person{id name}}
                        dia,thik safe lay level proj nxtd1 nxtd2 ust
                        isp1{id,conclusion,ispDate,no} isp2{id,conclusion,ispDate,no}
                        ispsv{id,conclusion,ispDate,no} ninsp regd reg
                        ad{id,prefix,name,country{id},province{id},city{id},county{id},town{id}},
                        dets{id,task{id,date}},crDate
                    },
                    __typename
                }
            }
        `,
        props.prepared.eqpQuery,
    );
    const { node:eqp, }=data;


  async function updateRecipe(id: string) {
    try {
    //  await updateFunc();
    } catch (err: any) {
      toast({
        title: "后端报错",
        subtitle: err.message,
        intent: "error"
      });
      return;
    }
    toast({
      title: "返回了",
      subtitle: '作废 ID＝'+id,
      intent: "info"
    });
  }
  const {history } = useContext(RoutingContext);
    const {save, field, reurl, p1field, multi}= window.history.state?.state??{};      //通用伪对话框传递格式
    console.log("返回刚才编辑器页面 frm-save=", save,"reurl=",reurl);
    //一般编辑器页面点击转去伪对话框路由页面，实际都是针对某一个特定属性字段filed={}的选定设置。 上面reurl参数就是保存了返回的URL;
    //.svp{} .pa{} 这样子是嵌套的对象里面的待设置的属性字段如何是好啊：修改嵌套第二层的字段?
    // const [dxDevs, setDxDevs, writeError] = useStorageState(
    //     sessionStorage,
    //     '管道单元多选集',
    //     [] as any[]
    // );
    const [dxDevs, setDxDevs, { isPersistent,removeItem  }] = useSessionStorageState('管道单元多选集', {
        defaultValue: [] as any[]
    });
    //【冲突】设备台账既可以跳去选择单位后返回编辑，也可能新任务页面到这里挑选设备待返回。只好用reurl作为区分条件！
    if(save && field) {          //修改成当前选择的单位。 field是原始编辑页面的保存属性字段名。
        console.log("伪对话—台账改单位也来这：", window.history.state?.state);
        if(reurl) {
            if(multi){      //？？不应该有这个？##
                if (p1field) save[p1field][field] = dxDevs;
                else save[field] = dxDevs;
            }else {
                if (p1field) save[p1field][field] = {id: eqp?.id, name: eqp?.code};      //最多2层的编辑的目标对象属性字段。
                else save[field] = {id: eqp?.id, name: eqp?.code};
            }
            //【嵌套地狱】这里修改save[field]也会导致window.history.state?.state同步被修改了问题！某页面【选择设备】和设备再去单位选择冲突，跳2次对话框?
        }
    }
    //const id=useUid();【路由问题！】点击左半边的设备列表，切换右边的设备时这里的useUid(++)竟然保持不变。必须在底下加上key={props.routeData.params.id!}才能保证完全能更新页面显示。
    const handleSelect = React.useCallback(() => {
        if(save && field) {
            if(reurl) {
                if(multi){
                    if (p1field) save[p1field][field] = dxDevs;
                    else save[field] = dxDevs;
                }else {
                    if (p1field) save[p1field][field] = {id: eqp?.id, name: eqp?.code};
                    else save[field] = {id: eqp?.id, name: eqp?.code};
                }
            }
        }
    }, [dxDevs,save, field,reurl,multi,p1field,eqp]);
    // const handleReset = React.useCallback(() => {
    //     setDxDevs([]);
    // }, [setDxDevs]);
    const inDxDevs= dxDevs?.some((device: { id: string; }) => device.id===eqp?.id);
    const {view: selectDevsDialog, open, setOpen}= usePipingUnitMultiSelect(
        {dxDevs, setDxDevs });

  return (
      <TwoHalfRightPanel
          title={ reurl?
              <Button size="lg" intent="primary" variant="ghost" iconAfter={<IconCloud />}
                      css={{ whiteSpace: 'unset' }}
                      onPress={ async () => {
                          handleSelect();
                          console.log("点反汇编及save=", save,dxDevs);
                          await history.push(reurl, {save,field,p1field,multi});
                      } }
              >{multi? '挑完多选集' : '选定这个'}，返回刚才编辑器页面
              </Button>
              :
              `管道单元ID号：${eqp?.id!}`
          }
          back={
              <RouterLink href={`/pipeline/${eqp?.pipe?.id!}/`}>
                  <IconButton  noBind  icon={<IconArrowLeft />}
                               variant="ghost"
                               label="后退"
                               size="md"
                               css={{
                                   marginRight: theme.spaces.sm,
                                   [theme.mediaQueries.md]: {
                                       display: "none"
                                   }
                               }}
                  />
              </RouterLink>
          }
          menu={
              <VerticalMenu>
                  <DdMenuItem label="生成新任务"
                          onClick={(e) => {
                              //   setLocation("/device/"+id+"/addTask", { replace: false });
                          }}/>
                  <DdMenuItem label="所属管道装置"
                              onClick={(e) => {
                                  history.push(`/device/${eqp?.pipe?.id!}/`)
                              }}/>
              </VerticalMenu>
          }
      >
            <div
              css={{
                display: 'flex',
                alignItems:'center',
                justifyContent:'center',
                minHeight: '85vh',
                [theme.mediaQueries.md]: {
                  paddingTop: theme.spaces.lg,
                  paddingBottom: theme.spaces.lg,
                  minHeight:'unset',
                }
              }}
            >
                <div
                  css={{
                  width:'100%',
                }}
                >
                     <PipingUnitDetail id={props.routeData.params.ppuId!} eqp={eqp}/>
                  <div css={{ marginTop: theme.spaces.sm }}>
                    <RouterLink href={`/device/`}>
                      <Button
                        size="lg" noBind
                        intent="primary"
                        iconAfter={<IconArrowRight />}
                      >
                        其他功能
                      </Button>
                    </RouterLink>
                  </div>
                </div>
            </div>

          { reurl &&
              <Button size="lg" intent="primary" variant="ghost" iconAfter={<IconCloud />}
                      onPress={ async () => {
                          if(save && field) {          //修改成当前选择的单位。 field是原始编辑页面的保存属性字段名。
                              console.log("伪对话返回编辑器去：", window.history.state?.state);
                              if(reurl) {
                                  if(multi){
                                      //onPress按钮里面看见dxDevs却不是最新的！
                                      if (p1field) save[p1field][field] = dxDevs;
                                      else save[field] = dxDevs;
                                  }else {
                                      if (p1field) save[p1field][field] = {id: eqp?.id, name: eqp?.code};      //最多2层的编辑的目标对象属性字段。
                                      else save[field] = {id: eqp?.id, name: eqp?.code};
                                  }
                              }
                          }
                          await history.push(reurl, {save,field,multi});
                      } }
              >{multi? '挑完多选集' : '选定这个'}，返回刚才编辑器页面
              </Button>
          }

          <div css={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-evenly',
          }}>
              <IconButton
                  onClick={() => 0}
                  variant="ghost"
                  label="多选或取消"
                  icon={ <IconCheckSquare /> }
              />
              <DdMenu label="多选" icon={<Button size="sm">多选</Button>} >
                  <DdMenuItem label={inDxDevs? "移出多选集" : "加入多选集" }
                              onClick={  () => {
                                  //后端给的GlobalId的type不一致导致，一个设备有不同id的；
                                  let newarr;
                                  if (inDxDevs) {
                                      newarr= dxDevs.filter((device: { id: string; }) => device.id !== eqp?.id);
                                  } else {
                                      const one = {...eqp} as unknown as IPipingUnitEntity;
                                      //dxDevs.push(one);   不能这么用啊！必须不可变量给setXXX(), 不能直接添加到dxDevs，否则后面的setDxDevs就没真的动作没变化？
                                      newarr= dxDevs? dxDevs.concat(one) : [one];
                                  }
                                  setDxDevs(newarr);
                                  // sessionStorage['设备多选集'] =JSON.stringify(newarr);
                              } } />
                  <DdMenuItem label={`当前多选集${dxDevs?.length||0}个设备`}
                              onClick={  () => {
                                  setOpen(true);
                                  console.log("展示当前多选集=[",  dxDevs,  "] 几个=", dxDevs?.length);
                              } } />
              </DdMenu>
              <DdMenu label="内菜单" tight={true}
                      icon={
                          <MenuItem variant="ghost"  component={"div"}>
                              <IconMenu />
                          </MenuItem>
                      }
              >
                  <DdMenuItem label="当前任务是"
                              onClick={async(e) => {
                                  // history.push(`/task/${taskCurSel}`);
                              }}/>
              </DdMenu>
              {selectDevsDialog}
          </div>
      </TwoHalfRightPanel>
  );
};



/*为了能立刻刷新操作反馈页面，引入三级路由，把数据获取放在了公共上级组件去，某页面操作的同时能更新查询另外页面显示立即反馈到。
function ThirdRouterContent({id, device}: ThirdRouterProps) {
    return (
        <React.Fragment>
            <Switch>
                <Route path={"/device/new"}>
                    <ComposeDevice  readOnly={false}/>
                </Route>
                <Route path={"/device/:id/addTask"}>
                    <AddToTask id={id} dt={device}/>
                </Route>
                <Route path={`/device/:id`}>
                    <DeviceDetail id={id} eqp={device}/>
                </Route>
                <Route path="/:rest*">没该URL内容</Route>
            </Switch>
        </React.Fragment>
    );
}*/
